<template>
  <div class="app-container">
    <el-form ref="editForm" :model="editForm" :rules="rules" label-width="160px">
      <h3>基础信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="品种" prop="variety">
            <el-select
              v-model="editForm.variety"
              placeholder="请选择品种"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_medicine_variety_type"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="条码" prop="barCode">
            <el-input
              v-model="editForm.barCode"
              placeholder="请输入条码"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品名称" prop="medicineName">
            <el-input
              v-model="editForm.medicineName"
              placeholder="请输入药品名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通用名称" prop="generalName">
            <el-input
              v-model="editForm.generalName"
              placeholder="请输入通用名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保质期(月)" prop="qualityGuaranteePeriod">
            <el-input
              v-model="editForm.qualityGuaranteePeriod"
              placeholder="请输入保质期"
              maxlength="4"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分类" prop="medicineType">
            <el-select
              v-model="editForm.medicineType"
              placeholder="请选择商品分类"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_medicine_type"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产地" prop="origin">
            <el-select
              v-model="editForm.origin"
              placeholder="请选择产地"
              clearable
              style="width: 100%"
            >
              <el-option label="未知" :value="0" />
              <el-option label="国产" :value="1" />
              <el-option label="进口" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新特药" prop="newSpecial">
            <el-radio-group v-model="editForm.newSpecial">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品规格" prop="medicineSpecifications">
            <el-input
              v-model="editForm.medicineSpecifications"
              placeholder="请输入药品规格"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他属性" prop="otherAttributes">
            <el-input
              v-model="editForm.otherAttributes"
              placeholder="请输入其他属性"
              maxlength="100"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处方分类" prop="prescriptionType">
            <el-select
              v-model="editForm.prescriptionType"
              placeholder="请选择处方分类"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_prescription_type"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="基药" prop="baseDrug">
            <el-radio-group v-model="editForm.baseDrug">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="社保" prop="socialSecurity">
            <el-radio-group v-model="editForm.socialSecurity">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input
              v-model="editForm.manufacturer"
              placeholder="请输入生产厂家"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装规格" prop="packagingSpecifications">
            <el-input
              v-model="editForm.packagingSpecifications"
              placeholder="请输入包装规格"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="unit">
            <el-select
              v-model="editForm.unit"
              placeholder="请选择单位"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_medicine_unit"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剂型" prop="dosageForm">
            <el-select
              v-model="editForm.dosageForm"
              placeholder="请选择剂型"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_dosage_form"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="停产" prop="stopProduction">
            <el-radio-group v-model="editForm.stopProduction">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="closeForm">关 闭</el-button>
      </el-form-item>
      <h3>其它信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="贮藏方法" prop="storageMethods">
            <el-input
              v-model="editForm.storageMethods"
              placeholder="请输入贮藏方法"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="不良反应" prop="adverseReactions">
            <el-input
              v-model="editForm.adverseReactions"
              placeholder="请输入不良反应"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相互作用" prop="interact">
            <el-input
              v-model="editForm.interact"
              placeholder="请输入相互作用"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主要成分" prop="mainComponents">
            <el-input
              v-model="editForm.mainComponents"
              placeholder="请输入主要成分"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="禁忌" prop="taboo">
            <el-input
              v-model="editForm.taboo"
              placeholder="请输入禁忌"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药物过量" prop="drugOverdose">
            <el-input
              v-model="editForm.drugOverdose"
              placeholder="请输入药物过量"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品性状" prop="drugProperties">
            <el-input
              v-model="editForm.drugProperties"
              placeholder="请输入药品性状"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注意事项" prop="precautions">
            <el-input
              v-model="editForm.precautions"
              placeholder="请输入注意事项"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药理毒理" prop="pharmacologyAndToxicology">
            <el-input
              v-model="editForm.pharmacologyAndToxicology"
              placeholder="请输入药理毒理"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="适应症" prop="indication">
            <el-input
              v-model="editForm.indication"
              placeholder="请输入适应症"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特殊人群用药" prop="medicationForSpecialPopulations">
            <el-input
              v-model="editForm.medicationForSpecialPopulations"
              placeholder="请输入特殊人群用药"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药代动力学" prop="pharmacokinetics">
            <el-input
              v-model="editForm.pharmacokinetics"
              placeholder="请输入药代动力学"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用法用量" prop="usageAndDosage">
            <el-input
              v-model="editForm.usageAndDosage"
              placeholder="请输入用法用量"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="不适宜人群用药" prop="inappropriatePopulation">
            <el-input
              v-model="editForm.inappropriatePopulation"
              placeholder="请输入不适宜人群用药"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="疗程说明" prop="courseDescription">
            <el-input
              v-model="editForm.courseDescription"
              placeholder="请输入疗程说明"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批准文号" prop="approvalNumber">
            <el-input
              v-model="editForm.approvalNumber"
              placeholder="请输入批准文号"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行标准" prop="executionStandards">
            <el-input
              v-model="editForm.executionStandards"
              placeholder="请输入执行标准"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="英文名" prop="englishName">
            <el-input
              v-model="editForm.englishName"
              placeholder="请输入英文名"
              maxlength="100"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="GNP有效时间" prop="effectiveTime">
            <el-date-picker
              v-model="editForm.effectiveTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择GNP有效时间"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特别管理属性" prop="special">
            <el-select
              v-model="editForm.special"
              placeholder="请选择特别管理属性"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.mc_medicine_special"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上市许可持有人名称" prop="holderName">
            <el-input
              v-model="editForm.holderName"
              placeholder="请输入上市许可持有人名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="药品本位码" prop="drugCode">
            <el-input
              v-model="editForm.drugCode"
              placeholder="请输入药品本位码"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂检验报告号" prop="reportNumber">
            <el-input
              v-model="editForm.reportNumber"
              placeholder="请输入出厂检验报告号"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="GNP证书号" prop="certificateNumber">
            <el-input
              v-model="editForm.certificateNumber"
              placeholder="请输入GNP证书号"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="GNP认证时间" prop="certificationTime">
            <el-date-picker
              v-model="editForm.certificationTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择GNP有效时间"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="养护标识" prop="maintenanceLabel">
            <el-select
              v-model="editForm.maintenanceLabel"
              placeholder="请选择养护标识"
              clearable
              style="width: 100%"
            >
              <el-option label="未知" :value="1" />
              <el-option label="普通" :value="2" />
              <el-option label="重要" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="editForm.remark"
              type="textarea"
              placeholder="请输入内容"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="closeForm">关 闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getMedicine, addMedicine, updateMedicine } from "@/api/mc/medicine";
export default {
  name: "medicine-edit",
  dicts: [
    "mc_medicine_variety_type",
    "mc_medicine_type",
    "mc_prescription_type",
    "mc_medicine_unit",
    "mc_dosage_form",
    "mc_medicine_special",
  ],
  data() {
    return {
      editForm: {
        id: null,
        variety: null,
        barCode: null,
        medicineName: null,
        generalName: null,
        qualityGuaranteePeriod: null,
        medicineType: null,
        origin: null,
        newSpecial: null,
        medicineSpecifications: null,
        otherAttributes: null,
        prescriptionType: null,
        baseDrug: null,
        socialSecurity: null,
        manufacturer: null,
        packagingSpecifications: null,
        unit: null,
        dosageForm: null,
        stopProduction: null,
        storageMethods: null,
        adverseReactions: null,
        interact: null,
        mainComponents: null,
        taboo: null,
        drugOverdose: null,
        drugProperties: null,
        precautions: null,
        pharmacologyAndToxicology: null,
        indication: null,
        medicationForSpecialPopulations: null,
        pharmacokinetics: null,
        usageAndDosage: null,
        inappropriatePopulation: null,
        courseDescription: null,
        approvalNumber: null,
        executionStandards: null,
        englishName: null,
        effectiveTime: null,
        holderName: null,
        drugCode: null,
        reportNumber: null,
        certificateNumber: null,
        certificationTime: null,
        maintenanceLabel: null,
        remark: null,
      },
      // 表单校验
      rules: {
        // variety: [{ required: true, message: "品种不能为空", trigger: "blur" }],
        // barCode: [{ required: true, message: "条码不能为空", trigger: "blur" }],
        medicineName: [{ required: true, message: "药品名称不能为空", trigger: "blur" }],
        qualityGuaranteePeriod: [
          { pattern: /^[1-9]\d*$/, message: "保质期必须为正整数", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.reset();
    const id = this.$route.query.id;
    if (id) {
      this.getMedicineInfo(id);
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.editForm = {
        id: null,
        variety: null,
        barCode: null,
        medicineName: null,
        generalName: null,
        qualityGuaranteePeriod: null,
        medicineType: null,
        origin: null,
        newSpecial: null,
        medicineSpecifications: null,
        otherAttributes: null,
        prescriptionType: null,
        baseDrug: null,
        socialSecurity: null,
        manufacturer: null,
        packagingSpecifications: null,
        unit: null,
        dosageForm: null,
        stopProduction: null,
        storageMethods: null,
        adverseReactions: null,
        interact: null,
        mainComponents: null,
        taboo: null,
        drugOverdose: null,
        drugProperties: null,
        precautions: null,
        pharmacologyAndToxicology: null,
        indication: null,
        medicationForSpecialPopulations: null,
        pharmacokinetics: null,
        usageAndDosage: null,
        inappropriatePopulation: null,
        courseDescription: null,
        approvalNumber: null,
        executionStandards: null,
        englishName: null,
        effectiveTime: null,
        holderName: null,
        drugCode: null,
        reportNumber: null,
        certificateNumber: null,
        certificationTime: null,
        maintenanceLabel: null,
        remark: null,
      };
      this.resetForm("editForm");
    },
    getMedicineInfo(id) {
      getMedicine(id).then((res) => {
        this.editForm = res.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          let request = this.editForm.id ? updateMedicine : addMedicine;
          request(this.editForm).then((res) => {
            this.$modal.msgSuccess("操作成功");
            this.closeForm();
          });
        }
      });
    },
    // 关闭窗口
    closeForm() {
      const obj = { path: "/medicine/medicine", query: { t: new Date().getTime() } };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
    line-height: 40px !important;
}
</style>
